<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {

            background: no-repeat;
            background-image: url(./ec7ef7b124633f28d68fa13ec1893fb2.jpg);
            background-size: cover;
        }

        .click {
            display: block;
            margin: 0 auto;
            width: 75px;
            height: 20px;
        }

        #box {
            position: fixed;
            top: 50%;
            left: 50%;
            display: none;
            width: 500px;
            height: 350px;
            background-image: url(./2.jpg);
            background-size: contain;
            text-align: center;
            /* line-height: 350px; */
            opacity: 0.8;
            z-index: 1;

        }

        span {

            position: absolute;
            right: -5px;
            top: -5px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 24px;
            background-color: #ccc;
            color: blueviolet;
            cursor: pointer;
            border-radius: 50%;
        }

        span:hover {
            color: #000;
        }

        p {
            margin-top: 60px;
        }

        #title {
            background-image: url(./1.jpg);
            background-size: contain;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
            cursor: move;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            height: 1000px;
            width: 100%;
            background-color: #fff;
            opacity: .5;
        }
    </style>
</head>

<body>
    <input type="button" value="点击登录" class="click">
    <div id="box">
        <span>x</span>
        <div id="title">
            登录
        </div>
        <form action="">
            <p>用户名: <input type="text" name="uname"></p>
            <p>密&nbsp;&nbsp;&nbsp;码: <input type="text" name="psd"></p>
            <input type="submit" name="" id="">
        </form>
    </div>
    <div class="mask"></div>
</body>
<script>
    // 获取关闭按钮
    var clo = document.querySelector('span')
    // 获取点击按钮
    var btn = document.querySelector('.click')
    // 获取登录框
    var box = document.querySelector('#box')
    // 获取遮罩层
    var mask = document.querySelector('.mask')
    var title = document.querySelector('#title')
    // 给按钮绑定点击事件
    btn.addEventListener('click', function () {
        box.style.display = 'block';
        mask.style.display = 'block';
    })
    clo.addEventListener('click', function () {
        box.style.display = 'none';
        mask.style.display = 'none';
    })
    title.addEventListener('mousedown', function (e) {
        var x = e.pageX - box.offsetLeft
        var y = e.pageY - box.offsetTop
        console.log(x, y);
        document.addEventListener('mousemove', move)
        function move(e) {
            box.style.top = e.pageY - y + 'px'
            box.style.left = e.pageX - x + 'px'
        }
        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', move)
        })
    })
</script>

</html>